<template>
	<!-- 合买大厅 -->
	<view>
		<!-- <view class="header">
			<view class="status-bar"></view>
			<view class="title flex-c">
				<view @click="fnGoBack()">
					<uni-icons type="back" size="24" color="#fff"></uni-icons>
				</view>
				<view class="flex-c">
					<text>合买大厅</text>
				</view>
				<view class="share flex">
					<image src="../../static/common/share.png"></image>
				</view>
			</view>
		</view>
		<view class="holder">

		</view> -->
		<view class="type">
			<view class="typebox flex-bc">
				<view class="typeItem flex-bc">
					<view class="itemBox flex-c" v-for="(item,index) in typeList" :key="index" @click="fnChangeType(index)">
						<text :class="currentIndex == index? 'active': '' ">{{item}}</text>
					</view>
				</view>
				<view class="select" @click="fnChangeDrawer()">
					<text>筛选</text>
				</view>
			</view>
		</view>
		<view class="holder1">

		</view>

		<view class="list">
			<caipiaoList></caipiaoList>
		</view>

		<uni-drawer mode="right" ref="drawer">
			<view style="padding:100rpx;">
				<view class="uni-title">抽屉式导航</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import caipiaoList from '../components/list.vue'
	export default {
		components: {
			uniDrawer,
			caipiaoList
		},
		data() {
			return {
				currentIndex: 0,
				typeList: ['店内合买', '全网合买']
			};
		},
		methods: {
			fnGoBack() {
				uni.navigateBack()
			},
			fnChangeType(index) {
				if (this.currentIndex == index) return
				this.currentIndex = index
			},
			fnChangeDrawer() {
				this.$refs.drawer.open()
			}
		}
	}
</script>

<style lang="scss">
	// .header {
	// 	width: 100%;
	// 	/*  #ifdef  H5  */
	// 	height: 100rpx;
	// 	/*  #endif  */
	// 	/*  #ifdef  APP-PLUS  */
	// 	height: 150rpx;
	// 	/*  #endif  */
	// 	background: #F22F29;
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	z-index: 9999;

	// 	.status-bar {
	// 		height: var(--status-bar-height);
	// 	}

	// 	.title {
	// 		font-size: 36rpx;
	// 		color: #fff;
	// 		height: 100rpx;

	// 		view {
	// 			flex: 1;
	// 			padding: 0 20rpx;
	// 		}

	// 		.share {
	// 			justify-content: flex-end;

	// 			image {
	// 				width: 50rpx;
	// 				height: 50rpx;
	// 				display: block;
	// 				margin-right: 20rpx;
	// 			}
	// 		}
	// 	}
	// }

	// .holder {
	// 	/*  #ifdef  H5  */
	// 	height: 100rpx;
	// 	/*  #endif  */
	// 	/*  #ifdef  APP-PLUS  */
	// 	height: 150rpx;
	// 	/*  #endif  */
	// }

	.holder1 {
		width: 100%;
		height: 90rpx;
	}

	.type {
		width: 100%;
		height: 90rpx;
		background: #fff;
		border-bottom: 1rpx solid #eee;
		position: fixed;
		box-sizing: border-box;
		z-index: 9999;

		.typebox {
			height: 100%;
			position: relative;
			font-size: 30rpx;
			color: #777;

			.select {
				padding: 0 60rpx;
				border-left: 0.5rpx solid #ccc;
			}

			.typeItem {
				flex: 1;
				height: 100%;

				// padding: 0 80rpx;
				.itemBox {
					flex: 1;
					height: 100%;

					text {
						height: 100%;
						line-height: 90rpx;
						box-sizing: border-box;
					}
				}

				.active {
					border-bottom: 6rpx solid #F22F29;
					color: #F22F29;
				}
			}

			.border {
				position: absolute;
				bottom: 0;
				left: 0;
				height: 6rpx;
				width: 120rpx;
				border-radius: 2rpx;
				background: #F22F29;
			}
		}

	}
</style>
